import React, { Component } from 'react';
import {
  StyleSheet, View, ScrollView, DeviceEventEmitter, TouchableWithoutFeedback, TouchableOpacity, Image, Alert,
} from 'react-native';
import { Text } from 'native-base';
import { produce } from 'immer';
import ZlstIcon from '../../../components/zlst-icons';
import Theme from '../../../native-base-theme/variables/commonColor';
import { UtilToast } from '../../../utils/util-method';
import * as sparePartService from '../../../services/sparePart';
import * as todoService from '../../../services/todo';
import { FormTextChoice, FormText, FormSearchChoiceChange, FormInputPop } from '../../../components';
import SelectMaterialPosition from '../../../components/selectMaterialPosition';
import Item from './item';

class AddChangePart extends Component {
  static navigationOptions = {
    title: '零部件信息',
    headerStyle: { backgroundColor: Theme.toolbarDefaultBg, borderBottomWidth: 0, elevation: 0 },
    headerTintColor: '#FFFFFF',
    headerTitleStyle: {
      fontWeight: 'bold',
      fontSize: 20,
      flex: 1,
      textAlign: 'center',
    },
    headerBackImage: (
      <ZlstIcon
        name="fanhui"
        size={24}
        color="white"
      />
    ),
    headerRight: <View />,
  }

  searchUri = '127.0.0.1';

  searHeaderTitle = '请选择';

  searchNoHeader = false;

  _choiceConfirm = null;

  extraInfo = {};

  constructor(props) {
    super(props);
    this.state = {
      modalVisible: false,
      showSelectMaterialPosition: false,
      position: { id: '', name: '拆分位置', value: '', splitCode: '' },
      material: { materialId: '', materialCode: '', materialName: '', materialSpecModel: '' },
    };
  }

  _cancelModal = () => {
    this.setState({ modalVisible: false });
  }

  _showModal = () => {
    this.setState({
      modalVisible: true,
    });
  }

  choicePisiton = () => {
    this._choiceConfirm = (it) => {
      this.setState(produce(draft => {
        draft.position.id = it[0].id;
        draft.position.value = it[0].name;
      }));
    };
    this.searchUri = `${sparePartService.serverName}/infoWarehouse/topHouse`;
    // this.searchUri = 'http://192.168.15.56:80/infoWarehouse/topHouse';
    this.searchNoHeader = true;
    this.searHeaderTitle = '请选择拆分位置';
    this.extraInfo = {};
    this._showModal();
  }

  // choiceMaterial = () => {
  //   this._choiceConfirm = (it) => {
  //     this.setState(produce(draft => {
  //       draft.code.id = it[0].splitItemId;
  //       draft.code.value = it[0].splitDesc;
  //       draft.material.materialCode = it[0].splitDesc;
  //       draft.material.materialName = it[0].materialName;
  //       draft.material.materialSpecModel = it[0].materialSpecModel;
  //     }));
  //   };
  //   this.searchUri = `${sparePartService.serverName}/stockLogCtrl/toWarehouse`;
  //   // this.searchUri = 'http://192.168.15.56:80/stockLogCtrl/toWarehouse';
  //   this.searHeaderTitle = '请选择物料编码';
  //   this.searchNoHeader = true;
  //   this.extraInfo = { condition: this.state.llr.id };
  //   this._showModal();
  // }

  confirm = async () => {
    if (this.state.position.id) {
      DeviceEventEmitter.emit('addPartEvent', { splitItemId: this.state.position.id, splitDesc: this.state.position.value, splitCode: this.state.position.splitCode, materialId: this.state.material.materialId, materialCode: this.state.material.materialCode, materialName: this.state.material.materialName, materialSpecModel: this.state.material.materialSpecModel });
      this.props.navigation.goBack();
    } else {
      UtilToast('请选择拆分位置', 'danger');
    }
  }

  _hideSelectPart = () => {
    this.setState({
      showSelectMaterialPosition: false,
    });
  }

  _finishSelectPart = async (selectedList) => { // 故障位置选择结束
    if (selectedList && selectedList.length > 1) {
      const material = selectedList[selectedList.length - 1];
      this.setState(produce(draft => {
        draft.position.id = material.splitItemId;
        draft.position.value = material.splitDesc;
        draft.material.materialCode = material.materialCode;
        draft.material.materialId = material.materialId;
        draft.position.splitCode = material.splitCode;
        draft.material.materialName = material.materialName;
        draft.material.materialSpecModel = material.materialSpecModel;
      }));
    } else {
      UtilToast('该物料没有可选拆分位置', 'danger');
    }
  }

  _showSelectPart = () => {
    this.setState({
      showSelectMaterialPosition: true,
    });
  }

  render() {
    const { params } = this.props.navigation.state;
    const splitItem = {
      splitItemId: params.splitItemId,
      splitDesc: params.splitItemDesc,
      materialId: params.materialId,
      materialCode: params.materialCode,
      splitCode: params.splitCode,
      materialName: params.materialName,
      materialSpecModel: params.materialSpecModel,
    };
    return (
      <View style={styles.container}>
        {this.state.modalVisible && (
          <FormSearchChoiceChange
            onClose={this._cancelModal}
            searchUri={this.searchUri}
            extraInfo={this.extraInfo}
            type="radio"
            title={this.searHeaderTitle}
            searchNoHeader={this.searchNoHeader}
            choiceConfirm={this._choiceConfirm}
          />
        )}
        <SelectMaterialPosition
          show={this.state.showSelectMaterialPosition}
          hide={this._hideSelectPart}
          splitItem={splitItem}
          finish={this._finishSelectPart}
        />
        <ScrollView style={{ flex: 1 }}>
          <View>
            <View style={styles.title_container}><FormText name="基础信息" fontColor="black" /></View>
            <FormTextChoice name={this.state.position.name} value={this.state.position.value} choiceMethod={this._showSelectPart} />
            <FormText name="物料编码" value={this.state.material.materialCode} />
            <FormText name="备件名称" value={this.state.material.materialName} />
            <FormText name="备件型号" value={this.state.material.materialSpecModel} />
            {/* <FormTextChoice name={this.state.code.name} value={this.state.code.value} choiceMethod={this.choiceMaterial} /> */}
            {/* {this.state.material.materialCode !== '' && (
              <View>
                <FormText name="物料编码" value={this.state.material.materialCode} />
                <FormText name="备件名称" value={this.state.material.materialName} />
                <FormText name="备件型号" value={this.state.material.materialSpecModel} />
              </View>
            )} */}
          </View>
        </ScrollView>
        <TouchableOpacity style={styles.footer} onPress={() => this.confirm()} activeOpacity={0.8}>
          <Image
            source={require('../../../../assets/images/btn-cut-line-xxx.png')}
            style={{ width: '100%', height: 2, alignItems: 'center' }}
            resizeMode="stretch"
            resizeMethod="auto"
          />
          <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text style={{ color: 'white' }}>确定</Text>
          </View>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: '100%',
    flexDirection: 'column',
    backgroundColor: Theme.myPrimary,
  },
  title_container: {
    width: '100%',
    backgroundColor: 'white',
    borderLeftWidth: 8,
    borderLeftColor: '#4f6fe3',
    // borderRadius: 4,
  },
  header_container: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
  },
  headerText: {
    color: 'white',
    fontWeight: 'bold',
  },
  backBtn: {
    paddingLeft: 8,
    paddingRight: 8,
    paddingTop: 16,
    paddingBottom: 16,
  },
  itemContainer: {
    padding: 8,
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: 'white',
    borderLeftWidth: 8,
    borderLeftColor: '#4f6fe3',
  },
  itemLeftContainer: {
    flex: 1,
  },
  itemRightContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-end',
  },
  fontStyle: {
    fontSize: Theme.myNormalFontSize,
    color: 'black',
  },
  footer: {
    width: '100%',
    flexDirection: 'column',
    backgroundColor: Theme.myPrimary,
    height: 48,
  },
});

export default AddChangePart;
